import React, { useContext } from 'react';
import { useLocalStore, useObserver, useLocalObservable} from 'mobx-react-lite';
import { log } from '@/utils/app_fun';
import { observer } from 'mobx-react';

// let initValue: StoreType = {
//   bugs: [],
//   add: () => {
//     log("add")
//   },
//   count: () => {
//     return 0;
//   },
// };
// const StoreContext = React.createContext(initValue);
//
// type StoreType = {
//   bugs: Array<string>
//   add: (bug: string) => void
//   count: () => number
// }
//
// const StoreProvider = (props: {children: JSX.Element}) => {
//   const store: StoreType = useLocalStore<StoreType>(() => {
//     return {
//       bugs: ['first'],
//       add: (bug: string) => {
//         store.bugs.push(bug);
//       },
//       count: () => {
//         return store.bugs.length;
//       },
//     }
//   });
//   log(store.bugs)
//   return (
//     <StoreContext.Provider value={store}>
//       {props.children}
//     </StoreContext.Provider>
//   );
// };
//
// const BugsHeader = () => {
//   const store = useContext<StoreType>(StoreContext);
//   return useObserver(() => (
//     <h1>{store.count()}</h1>
//   ));
// };
//
// const ChangeValue = ()=>{
//   const store = useContext<StoreType>(StoreContext);
//   return <button onClick={() => {
//     store.add('zzz')
//   }}>add</button>
// }
//
// export default () => {
//   return (
//     <StoreProvider>
//       <main>
//         <BugsHeader />
//         <ChangeValue/>
//       </main>
//     </StoreProvider>
//   )
// }

const TimerView = observer(() => {
  const timer = useLocalObservable(() => ({
    secondsPassed: 0,
    increaseTimer() {
      this.secondsPassed++
    }
  }))
  return (
    <>
      <span>Seconds passed: {timer.secondsPassed}</span>
      <button onClick={()=>(timer.increaseTimer())}>++</button>
    </>
  )
})

export default TimerView

